<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>用户注册</title>

    <!-- Bootstrap -->
    <link href="<%=request.getContextPath() %>/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath() %>/static/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath() %>/static/css/jumbotron.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="<%=request.getContextPath() %>/static/js/html5shiv.min.js"></script>
      <script src="<%=request.getContextPath() %>/static/js/respond.min.js"></script>
    <![endif]-->
    
    <script type="text/javascript">
		function submitForm() {
			var username = document.getElementById("username");
			var password = document.getElementById("password");
			var confirmpassword = document.getElementById("confirmpassword");
			var realName = document.getElementById("realName");
			var phoneNumber = document.getElementById("phoneNumber");
			var address = document.getElementById("address");

			if (username.value == "") {
				alert("用户名不能为空！");
				username.focus();
				return false;
			}
			if (username.value.length < 5) {
				alert("用户名长度不能少于5！");
				username.focus();
				return false;
			}
			if(password.value==""){
				alert("密码不能为空！");
				password.focus();
				return false;
			}
			if(password.value.length<6){
				alert("密码长度不能少于6！");
				password.focus();
				return false;
			}
			if(password.value!=confirmpassword.value){
				alert("密码确认不相等！");
				confirmpassword.focus();
				return false;
			}
			if(realName.value==""){
				alert("真实姓名不能为空！");
				realName.focus();
				return false;
			}
			if(phoneNumber.value==""){
				alert("手机号码不能为空！");
				phoneNumber.focus();
				return false;
			}
			if(!(/^1[0-9][0-9]\d{4,8}$/.test(phoneNumber.value))){
				alert("请输入完整的11位手机号！");
				phoneNumber.focus();
				return false;
			}
			if(address.value==""){
				alert("地址不能为空！");
				address.focus();
				return false;
			}
			return true;
		}

    </script>
    
    

</head>

<body>
   <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="<%=request.getContextPath()%>/">本草纲目网</a>
        </div>
        
        <c:if test="${user eq null }">
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" method="post" action="<%=request.getContextPath()%>/Account/Login">
            <input type="hidden" name="action" value="login" />
            <div class="form-group">
              <input type="text" placeholder="账户" name="username" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="密码" name="password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">立即登陆</button>
            <a class="btn btn-info" href="<%=request.getContextPath() %>/Account/Register">马上注册</a>
          </form>
        </div><!--/.navbar-collapse -->
		</c:if>
		<c:if test="${user ne null }">
		<div id="navbar" class="navbar-collapse collapse">
		  <ul class="nav navbar-nav navbar-right">
		    <li><a>欢迎您，<b>${fn:escapeXml(user.realName) }</b>！</a></li>
		    <li><a href="<%=request.getContextPath() %>/Order/ShowMyOrders">我的订单</a></li>
		    <li><a href="<%=request.getContextPath() %>/Cart/ShowMyCart">我的购物车</a></li>
		    <li><a href="<%=request.getContextPath() %>/Account/Logout">注销</a></li>
		  </ul>
  		</div>
		</c:if>

      </div>
    </nav>


<div class="container">
<h1 style="font-family:华文行楷;" >本草纲目<small>网</small> </h1>
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
<form class="form-horizontal" method="post" onsubmit="return submitForm();">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-4 control-label">用户名：</label>
    <div class="col-sm-8">
      <input type="text" class="form-control" id="username" name="username" placeholder="用户名……">
    </div>
  </div>
  
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-4 control-label">密码：</label>
    <div class="col-sm-8">
      <input type="password" class="form-control" id="password" name="password" placeholder="密码……">
    </div>
  </div>
    
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-4 control-label">确认密码：</label>
    <div class="col-sm-8">
      <input type="password" class="form-control" id="confirmpassword" placeholder="确认密码……">
    </div>
  </div>
  
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-4 control-label">姓名：</label>
    <div class="col-sm-8">
      <input type="text" class="form-control" id="realName" name="realName" placeholder="姓名……">
    </div>
  </div>  
  
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-4 control-label">电话：</label>
    <div class="col-sm-8">
      <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" placeholder="电话……">
    </div>
  </div>
  
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-4 control-label">地址：</label>
    <div class="col-sm-8">
      <input type="text" class="form-control" id="address" name="address" placeholder="地址……">
    </div>
  </div>
  
  
  <div class="form-group">
    <div class="col-sm-offset-4 col-sm-8">
      <div class="col-sm-6">
      <button type="submit" class="btn btn-success">立即注册</button>
      </div>
      <div class="col-sm-6">
      <button type="reset" class="btn btn-warning">重新填写</button>
      </div>
    </div>
  </div>
  
  <div class="row">
    <c:if test="${errCode eq 1 }">
      <div class="alert alert-warning" role="alert" id="alert-warning">该用户名已经被使用了！</div>
    </c:if>
  </div>
  
  <input type="hidden" name="action" value="register" />
</form>
</div>
<div class="col-sm-3">
</div>
</div><!--<div class="row">-->
 
    <footer style="padding-top:19px;color:#777;border-top:1px solid #e5e5e5">
      <p>&copy; 2016 中国药科大学理学院信息管理与信息系统13480班第3组</p>
    </footer>

</div><!--<div class="jumbotron">-->

	<script src="<%=request.getContextPath() %>/static/js/jquery.min.js" ></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="<%=request.getContextPath() %>/static/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
